<template>
	<el-container>
		<el-main>
			<div class="order-list">
				<el-tabs v-model="listQuery.status" @tab-click="handleClick">
					<el-tab-pane :label="$t('order.nav1')" name="all"></el-tab-pane>
					<el-tab-pane :label="$t('order.nav2')" name="0"></el-tab-pane>
					<el-tab-pane :label="$t('order.nav3')" name="1"></el-tab-pane>
					<el-tab-pane :label="$t('order.nav4')" name="4"></el-tab-pane>
					<el-tab-pane :label="$t('order.nav5')" name="3"></el-tab-pane>
				</el-tabs>
				<order-item v-for="item in orderList" :key="item.id" @getList="getList" :order="item" label="list"></order-item>
				<div class="pagination-container">
		            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-size="listQuery.size" layout="total, prev, pager, next, jumper" :total="total">
		            </el-pagination>
		        </div>
			</div>
		</el-main>
	</el-container>
</template>

<script>
import orderItem from './component/orderItem.vue';
import { getOrderList } from '@/api/c'

export default {
  components: { orderItem },
  name: 'orderIndex',
  data() {
    return {
    	total: null,
    	listQuery: {
    		size: 5,
    		page: 1,
    		status: 'all'
    	},
    	orderList: []
    }
  },
	methods: {
		getList() {
			let params = Object.assign({}, this.listQuery);
		  if (params.status == 'all') {
		  	params.status = ''
		  }	
	      getOrderList(params).then(response => {
	          this.orderList = response.data.list
	          this.total = response.data.total
	      })
	    },
		handleClick() {
			this.getList()
		},
		handleSizeChange(val) {
	        this.listQuery.size = val
	        this.getList()
	    },
	    handleCurrentChange(val) {
	        this.listQuery.page = val
	        this.getList()
	    }
	},
	created() {
	  this.getList()
	}
}
</script>

<style  scoped>
p {
	margin: 0;
}
li {
	list-style: none;
}
.el-main {
	background: #FAFBFC;
	padding: 32px 0 50px 0;
}
.order-list {
	background: #ffffff;
	border: 1px solid #EBEDF8;
	padding: 20px 36px 30px 36px;
	width: 898px;
	margin: 0 auto;
}
.el-tabs__header {
	margin-bottom: 5px;
}
.pagination-container {
	margin: 30px 0 20px 0;
}
</style>
<style type="text/css">

</style>
